<template>
    <!-- 如果info有值得时候才显示出来 -->
    <div v-if="personal">
      <div class="top" @click="showPersonal()">
        <img v-if="personal.head" :src="personal.head" class="head">
        <img v-else src="@/assets/img/default_head.png" class="head">
        <div class="name">{{ personal.name }}</div>
        <div class="sex">{{ personal.sex ? '女' : '男' }}</div>
      </div>
      <van-cell title="历史订单" is-link to="finishOrder"></van-cell>
      <van-cell title="用户协议" is-link to="agreement"></van-cell>
      <div class="button">
        <!-- 属性穿透，就是给子组件class,style,id这些属性,是不需要props进行接收的 -->
        <van-button class="logout" type="danger" @click="logout">退出登录</van-button>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';// 引入axios
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
        info: null, // 个人信息
      }
    },
    created() {
      // this.getPersonalInfo();
    },
    methods: {
      // getPersonalInfo() {
      //   axios.post('http://localhost:6001/detail/member',{id:localStorage.userId}).then(res=>{
      //     this.info = res.data.result; // 保存个人信息
      //   }); 
      // },
      logout() {
        this.$router.push('/login'); // 返回到登录页面
        // 退出登录的时候需要清理userId
        localStorage.removeItem('userId');
        // delete localStorage.userId;
      },
      showPersonal(){
        this.$router.push('/personal')
      }
    },
    computed:{
      ...mapState(['personal'])
    }
  }
  </script>
  
  <style scoped>
  .top {
    height: 250px;
    background: rgba(227, 83, 10, 0.749);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  .head {
    width: 120px;
    height: 120px;
    border-radius: 100%;
  }
  .name {
    font-size: 30px;
    color: white;
    margin: 20px 0;
  }
  .sex {
    font-size: 14px;
    color: gold;
  }
  .logout {
    width: 80%;
  } 
  .button {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 100px;
  }
  .head{
    border: 2px solid #fff;
  }
  </style>